<template>
  <el-popover popper-class="quarter-picker-popover" :disabled="disabled">
    <el-input ref="reference" slot="reference" :value="InputText" :disabled="disabled" readonly>
      <i slot="prefix" class="el-icon-date"></i>
    </el-input>
    <div class="el-quarter-panel">
      <div class="el-quarter-header">
        <button
          type="button"
          aria-label="前一年"
          class="el-picker-panel__icon-btn el-icon-d-arrow-left"
          @click="handlePrevYear"
        ></button
        ><span role="button" class="el-date-picker__header-label">{{ year }}年</span>
        <button
          type="button"
          aria-label="后一年"
          class="el-picker-panel__icon-btn el-icon-d-arrow-right"
          @click="handleNextYear"
        ></button>
      </div>
      <div class="el-quarter-body">
        <div v-for="i in 4" :key="i">
          <a class="cell" :class="getCellClass(i)" @click="onSelectQuarter(i)">{{ `Q${i}` }}</a>
        </div>
      </div>
    </div>
  </el-popover>
</template>

<script>
  import { formatDate, parseDate, prevYear, nextYear } from 'element-ui/src/utils/date-util';
  export default {
    props: {
      value: { type: [Date, Number, String], default: () => new Date() },
      format: { type: String, default: 'yyyy-MM-dd' }, // 回显日期格式
      valueFormat: { type: String, default: '' }, // 输入输出日期格式
      disabledDate: { type: Function, default: () => {} },
      disabled: { type: Boolean, default: false }
    },
    data() {
      return {
        date: parseValue(this.value, this.valueFormat)
      };
    },
    computed: {
      year() {
        return this.date?.getFullYear();
      },
      InputText() {
        const date = parseValue(this.value, this.valueFormat);
        return formatValue(date, this.format);
      }
    },
    watch: {
      value(date) {
        this.date = parseValue(date, this.valueFormat);
      }
    },
    methods: {
      prevYear,
      nextYear,
      formatValue,
      getCellClass(i) {
        const className = [];
        const quarterDate = new Date(this.year, i * 3, 0);
        const currentQuarterDate = parseValue(this.value, this.valueFormat);
        if (formatValue(currentQuarterDate, this.valueFormat) === formatValue(quarterDate, this.valueFormat))
          className.push('current');
        if (this.disabledDate(quarterDate)) className.push('disabled');
        return className.join(' ');
      },
      handlePrevYear() {
        this.date = prevYear(this.date);
      },
      handleNextYear() {
        this.date = nextYear(this.date);
      },
      onSelectQuarter(quarter) {
        const quarterDate = new Date(this.year, quarter * 3, 0);
        if (this.disabledDate(quarterDate)) return;
        this.$emit('input', formatValue(quarterDate, this.valueFormat));
      }
    }
  };

  // 解析传入的值为Date对象
  function parseValue(value, format) {
    if (value instanceof Date) return value;
    if (format === 'timestamp') return new Date(value);
    return parseDate(value, format);
  }

  // 格式化传入的Date对象
  function formatValue(date, format) {
    if (!date) return '';
    if (!format) return date;
    if (format === 'timestamp') return date.getTime();
    if (format === 'yyyy-QN') {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const quarter = Math.ceil(month / 3);
      return `${year}-Q${quarter}`;
    }
    return formatDate(date, format);
  }
</script>

<style>
  .quarter-picker-popover {
    padding: 12px 12px 0;
  }
</style>
<style lang="scss" scoped>
  .el-quarter-panel {
    width: 292px;

    .el-quarter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
      padding-bottom: 12px;
      line-height: 30px;

      .el-picker-panel__icon-btn {
        margin-top: 0;
        padding: 0 6px;
      }
    }

    .el-quarter-body {
      display: flex;
      font-size: 12px;

      div {
        flex: 1;
        padding: 8px 0;
        text-align: center;
        cursor: pointer;

        .cell {
          display: block;
          margin: 0 auto;
          width: 60px;
          height: 36px;
          line-height: 36px;
          color: #606266;

          &:hover,
          &.current {
            color: #409eff;
            transition: 0.3s all;
          }

          &.current {
            font-weight: bold;
          }

          &.disabled {
            color: #c0c4cc;
            background-color: #f5f7fa;
            cursor: not-allowed;
          }
        }
      }
    }
  }

  ::v-deep {
    .el-input__prefix {
      left: 8px;
    }

    .el-input__suffix {
      right: 8px;
    }

    .el-icon-circle-close {
      cursor: pointer;
    }
  }
</style>
